import {LearnCourseWrapper, Wrapper} from './style'
import {Dropdown, MenuProps, Tabs, TabsProps} from "antd";
import {useState} from "react";
import {MoreOutlined} from "@ant-design/icons";
import styled from "styled-components";

const ArchiveManagement = ({archiveCourse, setIsArchivedChange, changeArchive}: any) => {

    const [currentIndex, setCurrentIndex] = useState(0)

    const [currentCourse, setCurrentCourse] = useState('')

    const NoData = () => {
        const NoDataWrapper = styled.div`
            padding-bottom: 12px;
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            color: #74787c;
            line-height: 24px;
            margin-bottom: 30px;
            height: max-content;

            .box {
                padding-bottom: 12px;

                img {
                    height: 184px;
                    display: block;
                    margin: 0 auto;
                }
            }
        `;

        return (
            <NoDataWrapper className="no-data">
                <div className="box">
                    <img src="	https://www.ketangpai.com/img/img_empty.84d0931c.png" alt=""/>
                </div>
                <p>暂无数据</p>
            </NoDataWrapper>
        )
    }

    const LearnCourse = () => {
        const dropItems: MenuProps['items'] = [
            {
                label: <a onClick={() => {
                    changeArchive(currentCourse).then(() => {
                        setIsArchivedChange(true)
                    })
                }}>恢复</a>,
                key: '0',
            },
            {
                label: <a>删除</a>,
                key: '1',
            },
        ];
        return (
            <LearnCourseWrapper>
                <div className="semester">
                    {
                        archiveCourse.map((item: any, index: number) => {
                            return <p className={`item ${currentIndex === index ? 'active' : ''}`} key={index}
                                      onClick={() => {
                                          setCurrentIndex(index)
                                      }}> {item.title} </p>
                        })
                    }
                </div>
                <div className="course">
                    {
                        archiveCourse[currentIndex].course.map((item: any, index: number) => {
                            return (
                                <div className="item" key={index}>
                                    <div className="left">
                                        <span className='flag'>
                                            <span className='text'>{item.identity === '学生' ? '学' : '教'}</span>
                                        </span>
                                        <p>加课码 {item.code}</p>
                                    </div>
                                    <div className="right">
                                        <div className="header">
                                            <span>{item.teachClass}</span>
                                            <div className="handle">
                                                <Dropdown placement={'bottom'} arrow menu={{items: dropItems}}
                                                          trigger={['click']} onOpenChange={() => {
                                                    setCurrentCourse(item.id)
                                                }}>
                                                    <MoreOutlined/>
                                                </Dropdown>
                                            </div>
                                        </div>
                                        <div className="name">{item.name}</div>
                                        <div className="bottom"> 成员1人</div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </LearnCourseWrapper>
        )
    }

    const onChange = (key: string) => {
        console.log(key);
    };

    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '我学的',
            children: archiveCourse.length > 0 ? <LearnCourse/> : <NoData/>,
        },
        {
            key: '2',
            label: '我协助的(0)',
            children: 'Content of Tab Pane 2',
        },
    ];
    return (
        <Wrapper>
            <Tabs defaultActiveKey="1" items={items} onChange={onChange}/>
        </Wrapper>
    )
}
export default ArchiveManagement;